<template>
  <div>
    <div class="shebeiliebiao">
      <con-title :topTitle="topTitle"></con-title>
    </div>
    <div class="gailanX"><device-view></device-view></div>
    <!-- 第一次循环 -->
    <div class="jidi" v-for="(item, index) in sensorList1" :key="index">
      <!-- 基地开始 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <!-- 标题 -->
          <span>{{ index }}</span>
        </div>
        <div class="jidi-item">
          <div v-for="(i, k) in item" :key="i + '-' + k">
            <div>
              <span
                v-if="i.online"
                :style="{ color: '#3dd93d' }"
                class="iconfont icon-yalichuanganqi"
              ></span>
              <span
                v-else
                :style="{ color: '#808080' }"
                class="iconfont icon-yalichuanganqi"
              ></span>
              <span>{{ i.devValue }}</span>
              <span>{{ i.devName }}</span>
            </div>
            <p>EUL:{{ i.eui }}</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { $sensorList1 } from "@/api/index.js";
import ConTitle from "@/components/ConTitle.vue";
import DeviceView from "./components/DeviceView.vue";
export default {
  name: "dataView",
  data() {
    return {
      topTitle: {
        type: "",
        text: "设备列表",
        msg: "监控所有设备状态",
      },
      sensorList1: {},
    };
  },
  mounted() {
    $sensorList1().then((res) => {
      console.log(res);
      this.sensorList1 = res.data.data;
    });
  },
  components: {
    ConTitle,
    DeviceView,
  },
};
</script>

<style lang="scss" scoped>
.shebeiliebiao {
  margin: 10px;
}
.gailanX {
  margin-right: 10px;
}
.jidi {
  width: 98.8%;
  margin-top: 10px;
  margin-left: 10px;
}
.jidi-item {
  display: flex;
  flex-wrap: wrap;
}
.jidi-item > div {
  width: 13.5%;
  height: px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-top: 10px;
  text-align: center;
}
.jidi-item span:nth-of-type(1){
  font-size: 50px;
  margin-right: 30px;
}
.jidi-item span{
  display: block;
  text-align: center;
  margin-top: 30px;
}
.jidi-item p{
  background: #f3f4f5;
  margin-top: 17px;
}
</style>